<template>
  <div>
<!--    <el-row>
      <el-col :span="16">
        <el-form-item label="检验方式:" required>
          <el-select placeholder="请选择" v-model="form.examineType" class="w160" :disabled="parentItem.purchaseType && parentItem.purchaseType != 0">
            <el-option :value="0" label="全部检验"></el-option>
            <el-option :value="1" label="计数抽样检验"></el-option>
          </el-select>
          <el-button class="ml10" type="primary" v-if="form.examineType == 1" @click="showJLFilesAction = true">样本检验</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="form.isHege">
        <el-form-item label="批量接收/批量拒收："><el-input placeholder="数据带出" readonly class="w100" v-model="form.isHege === 0 ? '合格' : '不合格'"></el-input></el-form-item>
      </el-col>
    </el-row>

    <template v-if="form.examineType == 0">
      <div class="f14 mb20"><b>全部检验</b></div>
      <div class="reviewCon mb20">
        <el-row class="reviewList">
          <el-col :span="8">
            <el-form-item label="合格数量:" required><el-input placeholder="请输入" class="w160" v-model="form.qualifiedQty"></el-input></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不合格数量:" required><el-input placeholder="请输入" class="w160" v-model="form.failedQty"></el-input></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位:" required><el-input placeholder="数据带入" class="w160" v-model="parentItem.unit?parentItem.unit:parentItem.cailiaoUnit" readonly></el-input></el-form-item>
          </el-col>
        </el-row>
      </div>
    </template> -->

    <el-dialog append-to-body :visible.sync="showJLFilesAction" title="计数抽样方案-样本检验" width="50%">
      <!-- <div class="f14 mb20"><b>计数抽样检验</b></div> -->
      <el-form size="small" ref="form" :model="form">
        <div class="reviewCon mb20">
          <div class="reviewList mb20">
            <el-row class="flex_wrap">
              <el-col :span="12">
                <el-form-item label="检验方案类别:" prop="examineWay" label-posation="left" :rules="[{ required: true, message: '请选择检验方案类别' }]">
                  <el-select placeholder="请选择" v-model="form.examineWay" class="w160" @change="examineWayChange($event, form)">
                    <el-option value="0" label="一次抽样"></el-option>
                    <el-option value="1" label="二次抽样"></el-option>
                    <el-option value="2" label="多次抽样"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验类别:" prop="examineLeibie" :rules="[{ required: true, message: '请选择检验类别' }]">
                  <!-- :0-正常检验，1-加严检验，2-放宽检验 -->
                  <el-select placeholder="请选择" v-model="form.examineLeibie" class="w160" @change="getSomeData()">
                    <el-option value="0" label="正常检验"></el-option>
                    <el-option value="1" label="加严检验"></el-option>
                    <el-option value="2" label="放宽检验"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批量（N）:" prop="piliang" :rules="[{ required: true, message: '请输入批量' }]">
                  <el-input placeholder="请输入" class="w160" v-model="form.piliang" @blur="findYangbenliangZima()"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验水平（IL）:" prop="examineShuiping" :rules="[{ required: true, message: '请选择检验水平' }]">
                  <el-select placeholder="请选择" v-model="form.examineShuiping" class="w160" @change="findYangbenliangZima()">
                    <el-option value="I" label="I"></el-option>
                    <el-option value="II" label="II"></el-option>
                    <el-option value="III" label="III"></el-option>
                    <el-option value="S1" label="S-1"></el-option>
                    <el-option value="S2" label="S-2"></el-option>
                    <el-option value="S3" label="S-3"></el-option>
                    <el-option value="S4" label="S-4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="样本量字码:" required><el-input placeholder="数据带出" readonly class="w160" v-model="form.zima"></el-input></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收质量限（AQL）:" prop="aql" :rules="[{ required: true, message: '请选择接收质量限' }]">
                  <el-select placeholder="请选择" v-model="form.aql" class="w160" @change="getSomeData()">
                    <el-option v-for="(item, i) in aql" :key="i" :value="item" :label="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="gray_bg mb20" style=" padding: 20px 20px 0 20px;" v-for="(item, i) in form.yblList" :key="i">
              <div class="success_f f14 mb20" v-if="form.examineWay > 0">
                <b>第{{ i | evnNumber }}次抽样检验:</b>
              </div>
              <el-row class="reviewList mb20 gray_bg">
                <el-col :span="24">
                  <el-form-item label="样本量:"><el-input placeholder="数据带出" readonly class="w160" v-model="item.yangbenliang"></el-input></el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="接收数（Ac）:"><el-input placeholder="数据带出" readonly class="w160" v-model="item.jieshoushu"></el-input></el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="拒收数（Re）:"><el-input placeholder="数据带出" readonly class="w160" v-model="item.jushoushu"></el-input></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="样本检验不合格品数:" prop="buhegepinshu" label-width="150">
                    <el-input placeholder="请输入" class="w160" v-model="item.buhegepinshu" @change="buhegepinshuChange(item)"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="样本检验合格品数:" label-width="150" required>
                    <el-input placeholder="数据带出" readonly class="w160" v-model="item.hegepinshu"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.buhegepinshu">
                  <el-form-item label="批量合格/不合格:" label-width="150" required>
                    <el-input placeholder="数据带出" readonly class="w100" v-model="item.isHege === 0 ? '合格' : '不合格'"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <!--   <el-row >
              <el-col :span="12">
                <el-form-item class="m0" label="样本检验不合格品数:" label-width="150" required>
                  <el-input placeholder="请输入" class="w160" v-model="form.qualifiedQty"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="m0" label="样本检验合格品数:" label-width="150" required>
                  <el-input placeholder="数据带出" readonly class="w160" v-model="form.failedQty"></el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
          </div>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer flex_center"><el-button type="primary" size="mini" @click="submit">确 定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import { findChouyangfanganOne, findChouyangfanganTwo, findChouyangfanganMany, findYangbenliangZima } from '@/api/myapi/common.js';
export default {
  props: {
    parentItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showJLFilesAction: false,
      form: {
        aql: '',
        zima: '',
        yblList: [],
        qualifiedQty: '', //合格数量
        failedQty: '', //	不合格数量
        examineType: 0,
        examineShuiping: '', //  检验水平
        examineWay: '', //  检验方式类别
        examineLeibie: '', //	检验类别：0-正常检验，1-加严检验，2-放宽检验
        piliang: '' //  批量
      }
    };
  },
  watch: {
    parentItem: {
      handler(newval) {
        if (newval.purchaseType != 0) {
          this.form.examineType = 0;
        }
      },
      deep: true,
      immediate: true
    }
  },
  filters: {
    evnNumber(val) {
      let evIndex = ['一', '二', '三', '四', '五'];
      return evIndex[val];
    }
  },
  methods: {
    init(){
      
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('onConfirm', this.form);
          this.showJLFilesAction = false;
        }
      });
    },
    setForm(item) {
      this.form = Object.assign(this.form, item);
      this.showJLFilesAction = true;
    },
    buhegepinshuChange(item) {
      console.log(item.buhegepinshu);
      item.hegepinshu = this.form.piliang - item.buhegepinshu;
      console.log(item.buhegepinshu >= item.ac);
      item.buhegepinshu > item.ac ? (item.isHege = 1) : (item.isHege = 0);
      this.$forceUpdate();
    },
    //查询样本量字码
    findYangbenliangZima() {
      if (this.form.piliang && this.form.examineShuiping) {
        let parmas = {
          pl: this.form.piliang,
          sp: this.form.examineShuiping
        };
        findYangbenliangZima(parmas).then(({ data }) => {
          console.log('获取字码');
          this.form.zima = data.data.zima;
          // let index=this.form.yblList.length-1;
          // console.log(data.data);
          // this.$set(this.form.yblList[index],'zima',data.data.zima)
          // this.form.yblList[index] = data.data;
          // this.$forceUpdate();
          this.getSomeData();
        });
      }
    },
    // 一次抽样方案查询样本量，接收数，拒收数
    findChouyangfanganOne() {
      const { examineLeibie, aql, zima } = this.form;
      let parmas = {
        examineLeibie,
        aql,
        zima
      };
      findChouyangfanganOne(parmas).then(({ data }) => {
        console.log('一次抽样');
        data.data.jieshoushu = data.data.ac;
        data.data.jushoushu = data.data.re;
        this.form.yblList = [data.data];
      });
    },
    // 二次抽样方案查询样本量，接收数，拒收数
    findChouyangfanganTwo() {
      const { examineLeibie, aql, zima } = this.form;
      let parmas = {
        examineLeibie,
        aql,
        zima
      };
      findChouyangfanganTwo(parmas).then(({ data }) => {
        console.log('二次抽样');
        console.log(data);
      });
    },
    // 多次抽样方案查询样本量，接收数，拒收数

    findChouyangfanganMany() {
      const { examineLeibie, aql, zima } = this.form;
      let parmas = {
        examineLeibie,
        aql,
        zima
      };
      findChouyangfanganMany(parmas).then(({ data }) => {
        console.log('多次抽样');
        console.log(data);
      });
    },
    //  检验方式
    examineWayChange(id, form) {
      console.log(id);
      let len = id == 0 ? 1 : id == 1 ? 2 : 5;
      form.yblList = [];
      for (let i = 0; i++, i <= len; ) {
        form.yblList.push({
          yangbenliang: '', //样本量
          buhegepinshu: '', //	不合格品数		false
          buhegeshu: '', //	不合格数
          hegepinshu: '', //	合格品数
          leijibuhegepinshu: '', //	累计不合格品数		false
          leijibuhegeshu: '', //	累计不合格数		false
          leijihegepinshu: '', //	累计合格品数
          isHege: '', //	批量合格/不合格；0-合格，1-不合格		false
          jieshoushu: '', //	接收数		false
          jushoushu: '' //	拒收数
        });
      }
      this.getSomeData();
    },
    //
    getSomeData() {
      const { examineLeibie, aql, zima, examineWay } = this.form;
      let parmas = {
        examineLeibie,
        aql,
        zima
      };
      if (examineLeibie && aql && zima) {
        if (examineWay == 0) {
          this.findChouyangfanganOne();
        } else if (examineWay == 1) {
          this.findChouyangfanganTwo();
        } else {
          this.findChouyangfanganMany();
        }
      }
    }
  }
};
</script>

<style scoped>
.reviewText {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #909499;
  opacity: 1;
}

.reviewList {
  background: #ffffff;
  border: 1px dashed #e4e8ed;
  opacity: 1;
  border-radius: 0px;
  padding: 20px 20px 0 20px;
  position: relative;
}
</style>
